<!DOCTYPE html>
<html class="no-js" lang="zh_CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <title>${system_admin_title}</title>
    #required_css
</head>

<body>#loading

<div class="app $!layout">
    <section class="layout">
        <!-- 内容主体 -->
        <section class="container">
            <section class="main-content">
                <!-- 主体操作栏 -->
                <header class="header navbar">
                    <!-- 左按钮区 -->
                    <div class="btn-group tool-button">
                        <a class="btn btn-primary navbar-btn" href="$!basePath/bi/table"><i class="ti-angle-left"></i>
                            Back</a>
                    </div>
                </header>
                <div class="content-wrap">
                    <div class="wrapper">
                        <section class="panel pt20">
                            <form id="tableFkForm" role="form" class="form-horizontal parsley-form"
                                  data-parsley-validate action="$!basePath/bi/table/fk/do" method="post">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-4 control-label">Forget Table</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" name="forgetTable"
                                                       value="$!table.name" readonly="readonly">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">Column</label>
                                            <div class="col-sm-8">
                                                <select name="forgetColumn" class="form-control">
                                                    #foreach($!col in $!table.columns)
                                                    <option value="$!col.name">$!col.name</option>
                                                    #end
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-4 control-label">Primary Table</label>
                                            <div class="col-sm-8">
                                                <select name="primaryTable" id="primaryTable" class="form-control"
                                                        onchange="changeTable(this)">
                                                    #foreach($!obj in $!tables)
                                                    #if($!table.name != $!obj.name)
                                                    <option value="$!obj.name">$!obj.name</option>
                                                    #end
                                                    #end
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">Column</label>
                                            <div class="col-sm-8">
                                                <select name="primaryColumn" id="primaryColumn" class="form-control">

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row p15">
                                    <section class="panel">
                                        <div class="panel-heading">
                                            <b>Forget Keys</b>
                                            <div class="pull-right">
                                                <button type="button" class="btn btn-default" onclick="addColumn()"><i
                                                        class="fa fa-plus"></i> Add Column
                                                </button>
                                            </div>
                                        </div>
                                        <div class="panel-body">
                                            <table id="columns" class="table table-bordered table-striped">
                                                <thead>
                                                <tr>
                                                    <th class="col-lg-2">Field Name</th>
                                                    <th class="col-lg-2">DataType</th>
                                                    <th class="col-lg-1">Length</th>
                                                    <th>Default</th>
                                                    <th>PK?</th>
                                                    <th>Not Null?</th>
                                                    <th>Auto Incr?</th>
                                                    <th class="col-lg-2">Comment</th>
                                                    <th></th>
                                                </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-lg-3"></div>
                                <div class="col-lg-6">
                                    <div class="form-group text-center">
                                        <label></label>
                                        <div>
                                            <button class="btn btn-primary btn-block btn-lg btn-parsley" type="button"
                                                    onclick="getColumns()" data-loading-text="Submit...">Submit
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </section>
                    </div>
                </div>
                <a class="exit-offscreen"></a>
            </section>
        </section>
    </section>
</div>
#required_js

<!-- 本页面脚本 -->
<script src="$!basePath/framework/js/form/form.js"></script>
<script src="$!basePath/framework/js/view/toast.js"></script>
<script src="$!basePath/framework/js/form/validator.js"></script>

<script type="text/javascript">
    function changeTable(obj) {
        jQuery.post("$!basePath/bi/table/fk/" + obj.value + "/columns", {}, function (data) {
            $("#primaryColumn").html("");
            $.each(data, function (i, n) {
                $("#primaryColumn").append("<option value='" + n.name + "'>" + n.name + "</option>");
            });
        });
    }
    $(function () {
        $("#tableFkForm").ajaxForm({
            beforeSubmit: function (arr, $form, options) {
                $form.find(".btn-parsley").button("loading");
            },
            success: function (data, statusText, xhr, $form) {
                if (data.success == true) {
                    Toast.success("Create Success!");
                } else {
                    Toast.error(data.message);
                }
                $form.find(".btn-parsley").button("reset");
            }
        });
        $("#primaryTable").change();
    });

</script>

#loading_close
</body>
</html>
